<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物品规格展示</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css-v=3.3.5.css"
          rel="stylesheet">
    <link href="css/font-awesome.min.css-v=4.4.0.css"
          rel="stylesheet">
    <link href="css/plugins/footable/footable.core.css"
          rel="stylesheet">

    <link href="css/plugins/dataTables/dataTables.bootstrap.css"
          rel="stylesheet">

    <link href="css/animate.min.css"
          rel="stylesheet">
    <link href="css/style.min.css-v=4.0.0.css"
          rel="stylesheet">
    <link href="layui/css/layui.css">
    <base target="_blank">
    <style>
        #zhuti {
            height: 100%;
        }
        #zhuti::before {
             background: url('img/lg.jpg') no-repeat fixed center;
             background-size: 300px;
             content: "";
             opacity: 0.2;
             /*透明度设置*/
             width: 80%;
             height: 80%;
             position: absolute;
         }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">

                    <h5>物品规格展示</h5>
<!--                    <form method="get" action="/user/downzip" id="bigform4" autocomplete="off" style="float: right" target="_self">-->
<!--                        <input type="submit"  class="btn-info" style="float: right" value="下载所有物品二维码">-->
<!--                    </form>-->

                    <div class="ibox-content">
                        <!--表格-->
                        <table id="zhuti" class="table table-striped table-bordered table-hover dataTables-example">
                            <thead id="thead1">
                            </thead>

                            <tbody id="tbody2">

                            </tbody>

                        </table>

                        <hr>

                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>物品规格</th>
                                <th>总数</th>
<!--                                <th>库存数</th>-->
                                <!--                                        <th>物品编号</th>-->
                            </tr>
                            </thead>

                            <tbody id="tbody3">

                            </tbody>
                        </table>


                        <!--                        返回功能-->
                        <div class="form-group">
                            <div class="col-sm-3 col-sm-offset-2">
                                <a target="_self" href="thingsShow.html">
                                    <input type="submit"
                                           class="btn btn-info"
                                           value="返回" style="margin-right: 40%;,margin-bottom: 10px">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery.min.js-v=2.1.4" ></script>
    <script src="js/bootstrap.min.js-v=3.3.5"
    ></script>

    <script src="js/plugins/dataTables/jquery.dataTables.js"
    ></script>

    <script src="js/plugins/dataTables/dataTables.bootstrap.js"
    ></script>
    <script src="layui/layer/layer.js" type="text/javascript" charset="utf-8"></script>

    <script src="js/content.min.js-v=1.0.0"
    ></script>
    <script src="layui/layui.js"></script>
    <script src="layui/excel.js"></script>


    <script>

        let listData = null;
        $(document).ready(function () {
            <!--获取url后边的参数-->
            function GetRequest() {
                const url = location.search; //获取url中"?"符后的字串
                let theRequest = new Object();
                if (url.indexOf("?") != -1)//判断不等于空
                {
                    let str = url.substr(1);//抽取字符
                    let strs = str.split("&");//抽取从&开始的
                    for (let i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            }

            let x = GetRequest();
            // console.log(x);
            let idd = x.id;

            $.ajax({
                type: "get",
                url: "/user/searchThings",
                data:{
                    "id":idd
                },
                success: function (msg) {
                    // var msg1=JSON.stringify(msg);
                    // var list=msg1.list;
                    let str = "";//最终的一个实例串
                    let str1 = "";//最终的一个实例串

                    let list = msg.sizeList;//获取list
                    // console.log(msg);
                    let tbody = document.querySelector("#tbody2");//获取对象
                    let tbody2 = document.querySelector("#tbody3");
                    let a = "";
                    // target
                    // console.log(list[i].id)
                    // 按钮1是删除
                    // let button2 = "<a style='z-index: 999' target=\"_self\" href=\"thing_bianji.html?id=" + list[i].id + "\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">物品编辑</button></a>"
                    //let button1 = "<a style='z-index: 999' target=\"_self\" href=\"delete.html?id=" + list[i].id + "\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">查看详情</button></a>"
                    // str += "<tr><td>" + list[i].classname + "</td><td>" + list[i].amount + "</td><td>" + list[i].stock + "</td><td>"
                    //     + list[i].all_signs + "</td><td style='z-index: 999'>" + button2 + "</td> <td style='z-index: 999'>" + button1 + "</td></tr>";
                    // str += "<tr><td>" + msg.name + "</td><td>" + msg.num +msg.unit+ "</td><td>" + msg.renum+msg.unit+ "</td><td>"
                    //     + msg.sign + "</td><td>"+msg.sizeList+"</td></tr>";

                    let  sign = msg.sign==null?"":msg.sign;

                    str =   "<tr><td>物品名称</td><td>" + msg.name + "</td></tr>" +
                            "<tr><td>总数</td><td>" + msg.num +msg.unit+ "</td></tr>" +
                            // "<tr><td>库存数</td><td>" + msg.renum+msg.unit+ "</td></tr>" +
                            "<tr><td>物品编号</td><td>" + sign + "</td></tr>\n" ;

                    // str += "<tr><td>" + list[i].activityname + "</td><td>" + list[i].borrower + "</td><td>" + list[i].handler + "</td><td>" + list[i].borrowingdate + "</td><td>" + returndate +
                    //     "</td><td>" + a + "</td><td style='z-index: 999'>" + button1 + "</td><td style='z-index: 999'>" + button2 + "</td></tr>";


                    tbody.innerHTML = str;
                    if (list.length != 0) {
                        for (let i = 0; i < list.length; i++) {
                            str1 += "<tr><td>" + list[i].size + "</td><td>" + list[i].num +msg.unit+ "</td></tr>";
                        }
                    }

                    tbody2.innerHTML=str1;
                    f();
                }
            });
        });


        function f() {
            $(".dataTables-example").dataTable({
                "order": [
                    [6, "desc"]
                ]
            });
            var oTable = $("#editable").dataTable();
            oTable.$("td").edita1ble("http://www.zi-han.net/theme/example_ajax.php",
                {
                    "callback": function (sValue, y) {
                        var aPos = oTable.fnGetPosition(this);
                        oTable.fnUpdate(sValue, aPos[0], aPos[1])
                    },
                    "submitdata": function (value, settings) {
                        return {
                            "row_id": this.parentNode.getAttribute("id"),
                            "column": oTable.fnGetPosition(this)[2]
                        }
                    },
                    "width": "90%",
                    "height": "100%"
                })
        }

        function fnClickAddRow() {
            $("#editable").dataTable().fnAddData(["Custom row", "New row", "New row", "New row", "New row"])
        };


        // 获取表格
        // function getExportData() {
        //     var data = []//数组
        //     var sj = {}//
        //     var template = {//json
        //         col1: '物品名称',
        //         col2: "总数",
        //         col3: '库存数',
        //         col4: '物品编号',
        //         col5: '物品编辑',
        //         col6: '物品删除',
        //     }
        //     console.log(listData)//打印msg
        //     data.push(template)
        //     for (var i = 0; i < listData.length; i++) {
        //         if(listData[i].sign==null)
        //             listData[i].sign=" ";
        //         sj = {
        //             col1: listData[i].classname,//物品名
        //             col2: listData[i].sum,//总数
        //             col3: listData[i].kusum,//库存数
        //             col4: listData[i].sign,//物品编号
        //             col5: listData[i].returndate,
        //             col6: listData[i].situation,
        //             // col7: listData[i].
        //             // col8: listData[i].detail
        //         }
        //         data.push(sj)//添加
        //     }
        //     return data
        // }

        <!--  导出excel  -->
        // function correctExport() {
        //     layui.use(['layer'], function () {
        //         // 直接调用iframe中的导出函数无法弹出下载
        //         parent.layui.excel.exportExcel(getExportData(), '会议室审批表.xlsx', 'xlsx')
        //         // 嵌套层级比较多，可以考虑用 top
        //         // top.LAY_EXCEL.exportExcel([[1, 2, 3]], 'test.xlsx', 'xlsx')
        //     })
        // }
    </script>

    <script type="text/javascript" src="../../../tajs.qq.com/stats-sId=9051096"
            charset="UTF-8"></script>
</div>
</body>
</html>


